//需要创建多个对象时使用构造函数去创建在语义上是通顺的
function TimerButton(){
  let timer = null,
      cfg = {
        container:'body',
        delay:6,
        title:'同意',
        onclick:''
      };
  let $btn = $("<input type='button' class='timer-button' value='同意(6s)' disabled/>");

  //事件绑定放在show方法里，每次show一次就绑定一次
  this.show=function(conf){
    // 1.dom结构
    $(cfg.container).append($btn);
    //更新最近的结构
    $.extend(cfg,conf);
    //把最新的结构反应到dom元素上去
    $btn.val(cfg.title+'('+cfg.delay+'s)');

    $btn.attr('disabled','disabled');

    timer = setInterval(()=>{
      cfg.delay--;

      if (cfg.delay <= 0){
        clearInterval(timer);
        $btn.val(cfg.title);
        $btn.removeAttr('disabled');
      } else{
        $btn.val(cfg.title+'('+cfg.delay+'s)');
      }
    },1000)

    //2.事件绑定
    $btn.click(cfg.onclick())
  } 
  
}

//不使用page load event，而是应该封装成一个对象
//UI组件的面向对象封装，3种方式
//(第一种方式几乎不用)

//1、全局对象，简单对象字面量而言，不完全是面向对象，不能包括私有方法
//()Object
//let timerBtn = {
//  show:function(){}
//}
//键值对都是公开的没有私有的。
//要是想要私有的需要闭包的工厂函数

//2、工厂函数（匿名函数的立即执行表达式+闭包=》全局对象）
//工厂函数是一个函数但是返回值是一个简单对象
//let timerBtn = (function(){
//...
//  function show(){}
//  return {show}
//})() 匿名函数的立即表达式
//使用：timerBtn.show()

//3、构造函数
//function TimerBtn(){
//  this.show = function(){}
//}
//使用：let btn = new TimerBtn();
//btn.show();
//

//参数化
//1、使用{}，避免参数过多的问题
//2、使用默认参数
//3、传的参数和默认参数要进行合并

